Day 13：Chrome Extension 實作篇 - Content Script 基礎介紹

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 13：Chrome Extension 實作篇 - Content Script 基礎介紹

🛠️ 進入網頁世界

前面我們學會了 popup 和 background 的溝通，今天我們要學習 Chrome Extension 的第三個重要組件：Content Script。它能讓我們的擴充功能直接操作網頁內容！

📋 學習目標

今天我們要完成：

1. 🌐 理解 Content Script 是什麼
2. 📝 在 manifest.json 中設定 content_scripts
3. 🔧 建立最簡單的 content.js
4. 📡 學會基本的訊息傳遞

🌐 理解 Content Script 的作用

1.1 什麼是 Content Script？

Content Script 是注入到網頁中的 JavaScript 檔案，簡單來說就是讓我們的擴充功能可以讀取和操作網頁內容。

🔍 程式碼片段 1：讀取網頁標題

可以抓取網頁上的任何文字資訊

// 讀取網頁的標題
const title = document.querySelector('h1').textContent;

👆 程式碼片段 2：監聽用戶點擊

可以知道用戶對網頁元素進行的交互

// 監聽用戶在網頁上的點擊
document.addEventListener('click', (event) => {
  console.log('用戶點擊了:', event.target);
});

📡 程式碼片段 3：發送訊息

把網頁上抓到的資料傳給背景腳本處理

// 把抓到的資料發送給 background script
chrome.runtime.sendMessage({
  action: 'pageData',
  data: { title: title }
});

用法說明：

• chrome.runtime.sendMessage：發送訊息給 background script
• action: 'pageData'：告訴 background 這是什麼類型的訊息
• data: { title: title }：實際要傳送的資料

1.2 Content Script 的限制

Content Script 有一些重要限制，但對我們的課表生成器來說已經足夠了！

❌ 不能做的事情

// ❌ 不能直接取得網頁的變數
// 例如：網頁有 var userName = "小明"，我們拿不到

// ❌ 不能呼叫網頁的函數
// 例如：網頁有 function showAlert()，我們不能直接呼叫

✅ 可以做的事情

// ✅ 可以讀取 HTML 元素
const studentName = document.querySelector('#studentName').textContent;

// ✅ 可以修改網頁內容
document.querySelector('h1').textContent = '新標題';

// ✅ 可以與 background script 溝通
chrome.runtime.sendMessage({ data: studentName });

📋 重要概念：隔離環境

想像 Content Script 就像是戴著手套操作網頁：

• 可以看到和觸摸網頁內容（讀取 DOM）
• 可以移動和改變東西（修改 DOM）
• 但不能直接碰觸網頁內部的程式碼（安全性考量）

📝 設定 manifest.json 的 content_scripts

基本的 content_scripts 設定

我們需要在 manifest.json 中告訴 Chrome：「在哪些網站執行我們的 content.js」

📋 重點部分解釋

只需要在現有的 manifest.json 中新增這一段：

"content_scripts": [
  {
    "matches": [
      "https://portal.fju.edu.tw/*",
      "http://estu.fju.edu.tw/*"
    ],
    "js": ["content.js"]
  }
]

用法說明：

• "content_scripts"：告訴 Chrome 我們要使用 Content Script
• "matches"：指定在哪些網站執行（只在輔大網站執行）
• "js": ["content.js"]：指定要執行的檔案名稱

🔧 建立基本的 content.js

3.1 最簡單的 content.js

讓我們一步一步建立 content.js，每個部分都詳細解釋：

🔍 程式碼片段 1：基本資訊顯示

確認 Content Script 有正確載入，並知道在哪個網頁

// content.js - 輔大課表生成器內容腳本
console.log('🌐 Content Script 已載入');
console.log('📍 當前網址:', window.location.href);

🔍 程式碼片段 2：檢查網頁類型

識別用戶在輔大的哪個系統，以便執行對應的功能

// 檢查是否在正確的頁面
function checkCurrentPage() {
  const url = window.location.href;

  if (url.includes('portal.fju.edu.tw')) {
    console.log('✅ 在輔大學生入口網站');
  } else if (url.includes('estu.fju.edu.tw')) {
    console.log('✅ 在輔大選課清單系統');
  } else {
    console.log('❓ 不在輔大網站');
  }
}

3.2 與 Background Script 溝通

📡 程式碼片段 3：發送訊息給 Background

// 發送頁面資訊給 background script
function sendPageInfo() {
  chrome.runtime.sendMessage({
    action: 'pageInfo',
    data: {
      url: window.location.href,
      title: document.title
    }
  });
}

用法說明：

• chrome.runtime.sendMessage()：發送訊息給 background script
• action: 'pageInfo'：告訴 background 這是頁面資訊
• data: {...}：實際要傳送的資料
• 用途：把網頁資訊傳給 background script 處理

📨 程式碼片段 4：接收來自 Background 的訊息

// 監聽來自 background 的訊息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('📨 收到訊息:', request);

  if (request.action === 'getPageData') {
    sendResponse({
      success: true,
      data: { title: document.title }
    });
  }

  return true; // 保持訊息通道開放
});

用法說明：

• chrome.runtime.onMessage.addListener()：監聽來自其他組件的訊息
• request：收到的訊息內容
• sendResponse()：回應訊息
• return true：保持訊息通道開放（重要！）
• 用途：讓 background script 可以要求 content script 提供資料

🧪 測試階段

測試步驟

🔧 步驟 1：建立檔案

將上面的程式碼保存為 content.js

⚙️ 步驟 2：更新 manifest.json

確認 manifest.json 包含 content_scripts 設定

🔄 步驟 3：重新載入擴充功能

在 Chrome 擴充功能管理頁面點擊重新載入

🧪 步驟 4：測試功能

1. 開啟任何網站：按 F12 查看 Console
2. 在輔大學生入口網與選課清單中 可以看到以下日誌輸出
   
3. 在 非輔大網站中 則沒有日誌輸出
   

📂 專案結構檢查

📁 fju-schedule-extension/
├── 📄 manifest.json     ← 擴充功能設定（今天新增 content_scripts）
├── 📄 background.js     ← 背景腳本
├── 📄 popup.html        ← 使用者介面
├── 📄 popup.js          ← 彈出視窗邏輯
└── 📄 content.js        ← 內容腳本（今天新增）

🔗 知識銜接：今天我們建立了 Content Script 的基礎，明天將學習如何實際操作網頁元素和抓取課表資料。

🎯 下集預告：Day 14 - Chrome Extension 實作篇 - Content Script DOM 操作基礎